﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
		* {
				margin: 0;
				padding: 0;
			}
			
			body {
				height: 50000px;
				background: linear-gradient(#fff, #000);
			}
			
			.rocket {
				position: fixed;
				width: 149px;
				height: 249px;
				background: url(img/robot.png) left top;
				top: 75%;
				right: 20px;
				display: none;
			}
			
			.rocket:hover {
				background-position: -100% 0px;
			}
			
			.rocket_hid {
				display: block;
			}
			
			.rocket_run {
				top:-25%;
				animation: srll .3s infinite steps(4) alternate;
				transition: top 10s cubic-bezier(.38, .76, .87, .21);
				-moz-transition: top 10s cubic-bezier(.38, .76, .87, .21);
				-webkit-transition: top 10s cubic-bezier(.38, .76, .87, .21);
				-ms-transition: top 10s cubic-bezier(.38, .76, .87, .21);
			}
			
			@keyframes srll {
				from {
					background-position: -200% 0%;
				}
				to {
					background-position: -600% 0%;
				}
			}
		}
		</style>
		<p>append和prepend都是以需要添加的元素为目标去添加的，他们都是把目标元素添加到obj之前，需要插入的元素之后，所以当插入时发现已经有需要插入的元素，他们就会不再添加</p>
		<div class="rocket"></div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rocket = $(".rocket"),
				scrollTop,
				rocket_run=$(".rocket_run"),
				me = false;
			Melon();

			function Melon() {
				$(window).on("scroll", melon);
			}

			function melon() {
				scrollTop = $(window).scrollTop();
				if(scrollTop <= 200) {
					rocket.removeClass("rocket_hid");
				} else {
					rocket.addClass("rocket_hid")
				}
			}
			rocket.on("click", function() {
				if(!me) {
					me = true;
					var a = parseFloat(rocket.position().top) / .75;
					$(window).off("scroll", melon);
					rocket.addClass("rocket_run");
					scrollTop = $(window).scrollTop();
					var time = setInterval(function() {
						var b = parseFloat(rocket.position().top) + a * .25;
						$(window).scrollTop(scrollTop * b / a);
						console.log(scrollTop * b / a);
						if(scrollTop * b / a <= 0) {
							rocket.removeClass("rocket_run");
							rocket.removeClass("rocket_hid");
							clearInterval(time);
							Melon();
							me = false;
						}
					}, 20)
				}
			})
		</script>
	</body>

</html>